<template>
	<view v-if="shopInfo" class="cart_shop_good_main">
		<view class="shop">
			<view class="left">
				<image src="../../../static/img/cart/unchoosed.svg" alt="" class="choosed" @click="chooseAllGoods(shopId)"
					v-show="!ifShopActive(shopId)" />

				<image  src="../../../static/img/cart/choosed.svg" alt="" class="choosed" @click="noChooseGoods(shopId)"
					v-show="ifShopActive(shopId)" />
			</view>
			<image class='image'  :src="shop.shopLogo" alt="" />
			<span>{{ shop.shopName }}</span>
		</view>
		<cart-good v-for="(good, index) in shopInfo.goods" :key="index" :goodInfo="good" :shopId="shopId" :shop="shop"
			class="goods" />
	</view>
</template>

<script>
	import CartGood from "./CartGood";

	import {
		mapGetters,
		mapMutations
	} from "vuex";

	export default {
		name: "CartShopGood",
		props: {
			shopInfo: {
				type: Object,
				default () {
					return null;
				},
			},
			shopId: {
				type: String,
				default () {
					return "";
				},
			},
		},
		data() {
			return {
				shop: this.shopInfo.shop,
			};
		},
		components: {
			CartGood
		},
		methods: {
			...mapMutations([
				"chooseAllGoods",
				"noChooseGoods",
				"goodCollected",
				"goodUnCollect",
			]),

		},
		computed: {
			...mapGetters(["ifShopActive"]),
		},
	};
</script>
<style lang="scss" scoped>
	.cart_shop_good_main {
		background-color: white;
		border-radius: 30rpx;
		margin: 20rpx 0;
		border-bottom: 2rpx solid rgb(226, 226, 226);
		padding-left: 4vw;
		padding-right: 3vw;
	}

	.left {
		display: grid;
		align-items: center;
	}

	.shop {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-weight: 800;

		
	}

	.shop > .image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		padding-right: 10rpx;
	}

	.choosed {
		height: 42rpx;
		width: 42rpx;
		padding-right: 10rpx;
	}
</style>
